
<template>
  <div class="banner_bigbox">
    <details-Header :bannerImg="bannerImg" 
                    :sightNames="sightName"
                    :gallaryImgs="gallaryImgs"></details-Header>
    <details-Headerback></details-Headerback>
    <div class="hegitgao">
      <details-List :list="list"></details-List>
    </div>
  </div>
</template>

<script>
// 
import detailsHeader from "./components/header";
import detailsHeaderback from "./components/headerback";

import detailsList from "./components/List";
// aixos发送数据请求
import aixos from "axios";
export default {
  name:"citXiangqing",
  components: {
    detailsHeader,
    detailsHeaderback,
    detailsList
  },
  data() {
    return {
      bannerImg:'',//请求详情header.vue的banner数据
      gallaryImgs:[],//请求详情header.vue的轮播的图片数据
      sightName:'',//请求详情header.vue的banner左下角的名字数据
      list:[],
      // 下面这个是原来的list的假数据
      /*lists: [
        {
          title: "这是2级菜单",
          children: [
            {
              title: "这是2级菜单"
            },
            {
              title: "这是2-1级菜单"
            },
            {
              title: "这是2-2级菜单"
            }
          ]
        },
        {
          title: "这是3级主菜单",
          children: [
            {
              title: "这是3级菜单"
            },
            {
              title: "这是3-1级菜单"
            },
            {
              title: "这是3-2级菜单"
            }
          ]
        },
        {
          title: "这是4级主菜单",
          children: [
            {
              title: "这是4级菜单"
            },
            {
              title: "这是4-1级菜单"
            },
            {
              title: "这是4-2级菜单"
            }
          ]
        }
      ]*/
    };
  },
  // 执行的方法
  methods: {
    getDetails(){
      // 当你点击列表城市1的时候，详情是城市1的所有内容，所以这里需要写一个参数带过去
      // 第一种跟home.vue文件一样
      // aixos.get('/api/detail.json?id='+this.$route.params.id)
      // 第二种优化
      aixos.get("/api/detail.json",{
        params:{
          id:this.$route.params.id
        }
      }).then(this.getDetailsSucc);
    },
    getDetailsSucc(res){
      // 若是成功，你的console的控制台已经显示你的请求data数据了
      console.log(res)
      // 对接口
      res=res.data;
      // 判断若是res.ret就是后台返回的data数据
      if (res.ret&&res.data) {
        // 请求详情header.vue的banner数据
        this.bannerImg=res.data.bannerImg
        // 请求
        this.gallaryImgs=res.data.gallaryImgs
        // 请求
        this.sightName=res.data.sightName
        // 请求list.vue里面的数据
        this.list=res.data.categoryList
      }

    }
  },
  // 发送数据请求，先用一个生命周期的函数，mounted:当渲染挂在完成执行一个函数，这个函数有个方法调用，在methods里面调用上面
  mounted() {
    this.getDetails();
  },
  // 教程是说在APP.vue里面添加了移除缓存的，但是移除缓存，你header.vue滑动事件就不生效了，所以还是使用了activated
   //   使用了keepalve,所以页面只展示了一次，要想跳转页面再次发送请求，那么他这个页面只要展示，activated就会被执行。
  // activated() {
    // 用addEventListener可以让多个事件按顺序都实现
    // addEventListener绑定一个scroll事件。一旦这个事件被执行，那么this.handeleScroll也会被执行
     // window.removeEventListener("scroll", this.handeleScroll);
    //  this.getDetails();
  // },
  //   解绑事件
  // 为何要解绑事件，当你上面的代码只能在本组件中使用。但是 window.addEventListener 他让其他组件也产生了影响。所以我们要做一个接触绑定
  // deactivated() {
    // 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。
    // window.removeEventListener("scroll", this.handeleScroll);
    //  this.getDetails();
  // }
};
</script>

<style>
.hegitgao {
  height: 100vh;
}
</style>